<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息设置</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">

    <style>
        .upload {
            display: none;
        }
        
        .prew {
            width: 120px;
            height: 120px;
        }
        
        .container {
            display: flex;
        }
        
        .male-label {
            display: flex;
        }
    </style>
</head>

<body>
    <!-- toast提示框 -->
    <div class="toast my-toast" data-bs-autohide="true" data-bs-delay="1500">

    </div>
    <!-- 核心内容区 -->

    <div class="container">
        <div class="content">
            <div class="info-wrap">
                <h3 class="title">基本设置</h3>
                <form action="javascript:;" class="user-form">
                    <div class="form-item">
                        <label for="email">邮箱</label>
                        <input type="text" name="email" id="email" class="email" placeholder="请输入邮箱" autocomplete="off">
                    </div>

                    <div class="form-item">
                        <label for="nickname">昵称</label>
                        <input type="text" name="nickname" id="nickname" class="nickname" placeholder="请输入昵称" autocomplete="off">
                    </div>
                    <div class="form-item">
                        <label>性别</label>
                        <label for="" class="male-label">
                            <input type="radio" name="gender" class="gender" value="0" id="">男</label>
                        <label for="" class="male-label">
                            <input type="radio" name="gender" class="gender" value="1" id="">女</label>
                    </div>
                    <div class="form-item">
                        <label for="desc">个人简介</label>
                        <textarea name="desc" class="desc" id="desc" cols="20" rows="10" placeholder="请输入个人简介" autocomplete="off"></textarea>
                    </div>
                    <button class="submit">提交</button>
                </form>
            </div>
        </div>
        <div class="avatar-box">
            <h4 class="avatar-title">头像</h4>
            <img class="prew" src="./img/1.webp.jpg" alt="">
            <label for="upload">更换头像</label>
            <input type="file" id="upload" class="upload">
        </div>

    </div>

    <script src="../js/axios.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../lib/form-serialize.js"></script>
    <script src="./index.js"></script>
</body>

</html>